<template>
  <div>
    <BetweenLayout>
      <template #left>
        <n-tabs
          size="large"
          type="segment"
          default-value="createPinia"
          @before-leave="update"
        >
          <n-tab-pane name="createPinia" tab="createPinia">
            <n-card>
              <n-code :code="createPiniaCode" language="javascript" />
            </n-card>
          </n-tab-pane>
          <n-tab-pane name="definePinia" tab="definePinia">
            <Skeleton :repeat="4" />
          </n-tab-pane>
        </n-tabs>
      </template>
      <template #right>
        <div v-if="tab === 'createPinia'">
          <n-space vertical>
            <Tip :text="tip1" type="tip" />
            <Tip :text="tip2" type="tip" />
            <Tip :text="tip3" type="tip" />
          </n-space>
        </div>
        <div v-else-if="tab === 'definePinia'">
          <Tip text="有兴趣的话来一起搭建吧！" type="tip" />
        </div>
      </template>
    </BetweenLayout>
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue'
import { loading } from '@/utils/loading'
import BetweenLayout from '@/components/BetweenLayout/index.vue'
import Skeleton from '@/components/Skeleton/index.vue'
import Tip from '@/components/Tip/index.vue'
import { createPiniaCode, tip1, tip2, tip3 } from './code'

export default defineComponent({
  name: 'SourceCode',
  components: {
    BetweenLayout,
    Tip,
    Skeleton
  },
  setup() {
    const load = loading()
    const tab = ref('createPinia')
    const update = e => {
      tab.value = e
      return true
    }
    return { load, tab, createPiniaCode, tip1, tip2, tip3, update }
  }
})
</script>

<style lang="scss" scoped></style>
